<script type='text/javascript' src='https://www.google.com/jsapi'></script>
    
<script type='text/javascript'>
	google.load('visualization', '1', {'packages': ['geomap', 'corechart']});
	google.setOnLoadCallback(drawMap);
	google.setOnLoadCallback(drawChart);

	function drawMap() {
		var data = new google.visualization.DataTable();
		data.addRows(12);

		data.addColumn('string', 'Provincie');
		data.addColumn('number', 'Populariteit');
		data.addColumn('string', 'hover');

		data.setValue(0, 0, 'NL-GR');
		data.setValue(0, 2, 'Groningen');
		    
		data.setValue(1, 0, 'NL-FR');
		data.setValue(1, 2, 'Friesland');

		data.setValue(2, 0, 'NL-DR');
		data.setValue(2, 2, 'Drenthe');

		data.setValue(3, 0, 'NL-FL');
		data.setValue(3, 2, 'Flevoland');

		data.setValue(4, 0, 'NL-OV');
		data.setValue(4, 2, 'Overijssel');

		data.setValue(5, 0, 'NL-NH');
		data.setValue(5, 2, 'Noord Holland');

		data.setValue(6, 0, 'NL-ZH');
		data.setValue(6, 2, 'Zuid Holland');

		data.setValue(7, 0, 'NL-UT');
		data.setValue(7, 2, 'Utrecht');

		data.setValue(8, 0, 'NL-GE');
		data.setValue(8, 2, 'Gelderland');

		data.setValue(9, 0, 'NL-ZE');
		data.setValue(9, 2, 'Zeeland');

		data.setValue(10, 0, 'NL-NB');
		data.setValue(10, 2, 'Noord Brabant');

		data.setValue(11, 0, 'NL-LI');
		data.setValue(11, 2, 'Limburg');


		data.setValue(0, 1, 1000);
		data.setValue(1, 1, -200);
		data.setValue(2, 1, 1300);
		data.setValue(3, 1, 200);
		data.setValue(4, 1, 300);
		data.setValue(5, 1, 400);
		data.setValue(6, 1, 700);
		data.setValue(7, 1, 400);
		data.setValue(8, 1, 200);
		data.setValue(9, 1, 900);
		data.setValue(10, 1, 450);
		data.setValue(11, 1, 100);

		var options = {};
		options['region'] = 'NL';
		options['dataMode'] = 'regions';
		options['width'] = '222px';
		options['height'] = '220px';
		options['showLegend'] = false;

		var container = document.getElementById('map_canvas');
		var geomap = new google.visualization.GeoMap(container);
		geomap.draw(data, options);

		google.visualization.events.addListener(geomap, 'regionClick', function(region) {
		  	console.log("" + region.region);
		});
	};

	function drawChart() {
		var data = new google.visualization.DataTable();
	    data.addColumn('string', '<?php echo $unit; ?>');

		<?php
			$columns = count($data);
			$rows = 0;
			
			foreach($data as $label => $value){
				echo ("data.addColumn('number', '". $label ."');");
				$rows = ((max(array_keys($value)) + 1) > $rows) ? (max(array_keys($value)) + 1) : $rows;
			}
		?>
	    
        data.addRows(<?php echo $rows; ?>);

		<?php
			$currentColumn = 0;
			foreach($data as $label => $valueArray){
				$currentColumn += 1;
				foreach($valueArray as $key => $value){
					$newdate = strtotime ('-'. $key .' '. $timeUnit, strtotime($date));
					$newdate = date ($dateTimeFormat , $newdate);
					echo("data.setValue(". $key .", 0, '". $newdate ."'); \n");
					echo("data.setValue(". (($rows - 1) - $key) .", ". $currentColumn .", ". $value ."); \n");
				}
			}
		?>

        var chart = new google.visualization.LineChart(document.getElementById('chart_canvas'));
        chart.draw(data, {
	        width: 690,
	        height: 220,
	        chartArea: {left:"10%",top:"12%",width:"70%",height:"70%"},
	        vAxis: {title: "Aantal keer getagged"},
	        hAxis: {title: "<?php echo $unit ?>", direction: "-1"},
	        pointSize: 4,
	        titlePosition: "none",
	        interpolateNulls: true
		});
	};
		
</script>